<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">一体杆名称：</span>
      <el-input v-model="params.poleName" clearable placeholder="请输入一体杆名称" class="search-main" @clear="getList" />
      <span class="search-label">一体杆编号：</span>
      <el-input v-model="params.poleNumber" clearable placeholder="请输入一体杆编号" class="search-main" @clear="getList" />
      <span class="search-label">运行状态：</span>
      <el-select v-model="params.poleStatus">
        <!-- <el-option v-for="item in []" :key="item.id" /> -->
        <el-option label="正常" :value="0" />
        <el-option label="异常" :value="1" />
        <!-- null表示没有这个条件 -->
        <el-option label="全部" :value="null" />
      </el-select>
      <el-button type="primary" class="search-btn" @click="getList" icon="el-icon-s-promotion">查询</el-button>
    </div>
    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="success" @click="open" icon="el-icon-thumb">添加一体杆</el-button>
      <el-button type="danger" @click="delMore" icon="el-icon-warning">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="list" style="width: 100%" @selection-change="fn">
        <el-table-column type="selection" width="100" />
        <el-table-column type="index" label="序号" />

        <el-table-column label="一体杆名称" prop="poleName" />
        <el-table-column label="一体杆编号" prop="poleNumber" />
        <el-table-column label="一体杆IP" prop="poleIp" />
        <el-table-column label="安装区域" prop="areaName" />edit
        <el-table-column label="一体杆类型" prop="poleType" :formatter="formatPoleType" />
        <el-table-column label="运行状态" prop="poleStatus" :formatter="formatStatus" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="mini" type="primary" @click="edit(scope.row)" icon="el-icon-scissors">编辑</el-button>
            <el-button size="mini" type="danger" @click="del(scope.row.id)" icon="el-icon-error">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible="flag" @close="handleClose" :title="operationType === 'edit' ? '编辑一体杆' : '添加一体杆'"
        custom-class="custom-dialog" top="70px" width="40%">
        <div class="dialog-content">
          <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="80px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="一体杆名称" prop="poleName">
                  <el-input v-model="form.poleName" size="medium" placeholder="请输入一体杆名称" style="width: 300px;" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="一体杆编号" prop="poleNumber">
                  <el-input v-model="form.poleNumber" placeholder="请输入一体杆编号" size="medium" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="一体杆IP" prop="poleIp">
                  <el-input v-model="form.poleIp" placeholder="请输入一体杆IP" size="medium" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="关联区域" prop="areaId">
                  <el-select v-model="form.areaId" placeholder="请选择关联区域" size="medium" style="width: 300px;">
                    <el-option v-for="item in dropList" :key="item.areaId" :label="item.areaName" :value="item.areaId" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="一体杆类型" prop="poleType">
                  <el-select v-model="form.poleType" placteholder="请选择一体杆类型" size="medium" style="width: 300px;">
                    <el-option label="入口" value="entrance" />
                    <el-option label="出口" value="export" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="button-group">
              <el-button @click="handleClose" type="danger" icon="el-icon-circle-close">取消</el-button>
              <el-button type="primary" @click="confirm" icon="el-icon-circle-check">确认</el-button>
            </div>
          </el-form>
        </div>
      </el-dialog>


    </div>
    <div class="page-container">
      <el-pagination layout="total,sizes, prev, pager, next" :total="total" :current-page="params.page"
        :page-sizes="[2, 4, 6, 8, 10]" :page-size="params.pageSize" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import {
  getRodListAPI,
  getDropListAPI,
  addRodAPI,
  editRodAPI,
  delRodAPI,
} from "@/api/rod";

export default {
  data() {
    return {
      //提供数据列表
      list: [], //发请求回去后端接口的数据存进来
      total: 0, //总数
      dropList: [], //获取关联列表数组
      flag: false,
      operationType: "", // 操作类型，用于设置弹窗标题
      params: {//用于获取列表的参数
        page: 1,
        pageSize: 10,
        poleName: null,
        poleNumber: null,
        poleStatus: null,
        // poleType:'',
        // poleStatus:''
      },
      form: {  //后端返回的参数字段
        poleName: "",
        poleNumber: "",
        poleIp: "",
        areaId: "",
        poleType: "",
      },
      rules: {
        poleName: [{ required: true, message: "一体杆名称不能为空！", trigger: ['blur', 'change'] }],
        poleNumber: [{ required: true, message: "一体杆编号不能为空！", trigger: ['blur', 'change'] }],
        poleIp: [{ required: true, message: "一体杆IP不能为空!", trigger: ['blur', 'change'] }],
        areaId: [{ required: true, message: "关联区域不能为空！", trigger: ['blur', 'change'] }],
        poleType: [{ required: true, message: "一体杆类型不能为空！", trigger: ['blur', 'change'] }],
      },
    };
  },
  //生命周期函数，特定时机执行，即页面加载完成了
  mounted() {
    this.getList();

    this.getDropList();
  },
  methods: {
    //获取关联区域下拉列表
    getDropList() {
      getDropListAPI().then((res) => {
        // console.log(res)
        this.dropList = res.data;
      });
    },
    //获取数据
    getList() {
      getRodListAPI(this.params).then((res) => {
        // console.log(res.data.rows, 999)
        this.list = res.data.rows;
        this.total = res.data.total;
        // this.poleType = res.data.poleType
        // this.poleStatus = res.data.poleStatus
      });
    },

    //打开添加弹窗
    open() {
      this.flag = true;
      this.operationType = "add";
      this.getDropList();
    },

    //关闭弹窗
    handleClose() {
      this.flag = false;
      this.form = {
        poleName: "",
        poleNumber: "",
        poleIp: "",
        areaId: "",
        poleType: "",
      };
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.getList();
    },
    handleCurrentChange(page) {
      // console.log("页面变化了")
      this.params.page = page;
      this.getList();
    },

    confirm() {
      this.$refs.form.validate((ok) => {
        if (ok) {
          if (this.form.id) {
            editRodAPI(this.form).then(() => {
              this.$message.success("编辑成功");
              this.getList();
              this.flag = false;
              this.form = {
                poleName: "",
                poleNumber: "",
                poleIp: "",
                areaId: "",
                poleType: "",
              };
            }).catch((error) => {
              this.$message.error(error.response.data.msg)
            })
          } else {
            addRodAPI(this.form).then((res) => {
              this.$message.success("添加成功");
              this.getList();
              this.flag = false;
              this.form = {
                poleName: "",
                poleNumber: "",
                poleIp: "",
                areaId: "",
                poleType: "",
              };
            }).catch((error) => {
              this.$message.error(error.response.data.msg)
            });
          }
          this.$nextTick(() => {
            this.$refs.form.clearValidate()
          })
        }
      });
    },

    edit(row) {
      // 打开弹窗
      this.flag = true;
      this.operationType = "edit";
      // 将当前行数据赋值给表单
      this.form = {
        id: row.id,
        poleName: row.poleName,
        poleNumber: row.poleNumber,
        poleIp: row.poleIp,
        areaId: row.areaId,
        poleType: row.poleType,
      };
    },
    del(id) {
      //确认删除/取消
      this.$confirm("是否确认删除")
        .then(() => {
          delRodAPI(id)
            .then(() => {
              this.getList();
              this.$message.success("删除成功");
            })
          // .catch(() => {
          //   this.$message.error("删除失败");
          // });
          // .catch((error) => {
          //   this.$message.error(error.response.data.msg)
          // })
        })

        .catch(() => {
          this.$message.error("已取消删除");
        });
    },

    fn(val) {
      let str = "";
      for (let index = 0; index < val.length; index++) {
        const temp = val[index];
        str = str + temp.id + ",";
      }
      // console.log(str)
      const idStr = str.slice(0, str.length - 1);
      this.idStr = idStr;
    },
    delMore() {
      this.$confirm("你确认要删除吗").then(() => {
        delRodAPI(this.idStr)
          .then(() => {
            this.$message.success("删除成功");
            this.getList();
          })
      }).catch((error) => {
        this.$message.error(error.response.data.msg)
      })
    },
    formatStatus(row) {
      if (row.poleStatus === 0) {
        return "正常";
      } else {
        return "异常";
      }
    },
    formatPoleType(row) {
      if (row.poleType === "entrance") {
        return "入口";
      } else {
        return "出口";
      }
    },

  },

};
</script>


<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-main {
    width: 220px;
    margin-right: 10px;
  }

  .search-btn {
    margin-left: 20px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}

.custom-dialog {
  width: 400px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-item {
  margin-bottom: 20px;
  text-align: center;
}

.button-group {
  display: flex;
  justify-content: flex-end;
}

.custom-dialog {
  display: flex;
  justify-content: center;
  border-radius: 10px;
}
</style>